<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		/*浮动*/
		.ul1>li,.img1,.img3,.img4,.img5,.img6,.img7,.img8,.img9,.img10{
			float: left;
		}
		/*清理浮动*/
		.div1:after,.div2:after,.div3:after{
			content: "";
			height: 0;
			display: block;
			clear: both;
		}
		/*清理样式*/
		ul{
			list-style: none;
		}
		a{
			text-decoration: none;
		}
		/*设置背景*/
		.div1{
			/*overflow: hidden;*/
			width: 100%;
			height: 70px;
			background-color: #262626;
		}
		/**/
		
		/*设置间距*/
		.img1{
			position: relative;
			top:10px;
			left:10px;
		}
		.a1{
			position: relative;
			top:21px;
			left:73px;
		}
		.a2{
			position: relative;
			top:21px;
			left:80px;
			padding: 30px;
		}
		.a3{
			position: relative;
			top: 21px;
			left:150px;
			padding: 10px;
		}
		/*设置字体颜色*/
		.ul1 a{
			color: white;
		}
		.img2{
			width: 100%;
			position: relative;
			top:25px;
		}
		.img7{
			position: relative;
			top:60px;
			left:140px;
		}
		.img6{
			position: relative;
			top:-10px;
			left:130px;
		}
		.p3{
			font-size: 20px;
			font-weight: bold;
			position: relative;
			top:-10px;
			left:260px;
		}
		.img5{
			position: relative;
			top:34px;
			left:110px;
		}
		.p2{
			font-size: 20px;
			font-weight: bold;
			position: relative;
			top:34px;
			left: 230px;
		}
		.img4{
			position: relative;
			top:78px;
			left:90px;
		}
		.p1{
			font-size: 20px;
			font-weight: bold;
			position: relative;
			top: 80px;
			left:190px;
		}
		.img3{
			position: relative;
			top:210px;
			left:50px;
		}
		.div3{
			width: 100%;
			height: 539px;
			background-color: #f2f2f2;
			position: relative;
			top:69px;
		}
		.img8{
			position: relative;
			top:30px;
			left:78px;
		}
		.img9{
			position: relative;
			top:30px;
			left:100px;
		}
		.img10{
			position: relative;
			top:30px;
			left:120px;
		}
		.p4{
			font-size: 40px;
			font-weight: bold;
			position: relative;
			top:30px;
			left:78px;
		}
		.div31,.div32,.div33{
			width: 383px;
			height: 180px;
			border: 1px dashed black;
			
		}
		.div31{
			position: relative;
			top:227px;
			left:78px;
		}
		.div32{
			position: relative;
			top:45px;
			left:485px;
		}
		.div33{
			position: relative;
			top:-137px;
			left:890px;
		}
		.body1{
			/*overflow: hidden;*/
			margin: 0px;
			padding: 0px;
		}
		.h21,.p5{
			position: relative;
			top:-180px;
		}
		.p5{
			color: #989898;
		}
		.p6{
			position: relative;
			top:-160px;
			left:180px;
			color: #989898;

		}
		.button1{
			border-radius: 5px 5px 5px 5px;
			position: relative;
			color: orange;
			top:-200px;
			left:320px;
		}
		.p7{
			position: relative;
			color: orange;
			top:-355px;
			left:280px;
		}
	</style>
</head>
<body class = "body1">
	<div class="div1">
		<img src="电商/images/logo.jpg" alt="无法加载图片" class="img1">
		<ul class="ul1">
			<li><a href="#" class="a1">首页</a></li>
			<li><a href="#" class="a2">课程</a></li>
			<li><a href="#" class="a2">每日作业</a></li>
			<li><a href="#" class="a2">免费视频</a></li>
			<li><a href="#" class="a2">免费直播厅</a></li>
			<li><a href="#" class="a2">问答</a></li>
			<li><a href="#" class="a2">学习指南</a></li>
			<li><a href="#" class="a2">个人中心</a></li>
			<li><a href="#" class="a3">登陆</a></li>
			<li><a href="#" class="a3">注册</a></li>
		</ul>
	<div>
	<div class = "div2">
		<img src="电商/images/banner.jpg" alt="" class="img2">

		<img src="电商/images/L.jpg" alt="" class="img3">
		<p class="p1">平面套餐</p>
		<img src="电商/images/tu.jpg" alt="" class="img4">
		<p class="p2">平面套餐</p>
		<img src="电商/images/package_pic2.jpg" alt="" class="img5">
		<p class="p3">平面套餐</p>
		<img src="电商/images/tu.jpg" alt="" class="img6">
		<img src="电商/images/R.jpg" alt="" class="img7">
	</div>
	<div class="div3">
		<p class="p4">ui设计</p>
		<img src="电商/images/ui_pic1.jpg" alt="" class="img8">
		<img src="电商/images/pm_pic2.jpg" alt="" class="img9">
		<img src="电商/images/pm_pic3..jpg" alt="" class="img10">
		<div class="div31">
			<h2 class="h21">Photoshop精品班</h2>
			<p class="p5">
				课程以基础为主，详细讲解软件的每一个工具的使用与技巧，
				让喜欢PS的你能够对软件迅速熟练及运用</p>
			<p class="p6">已经有3215人购买</p>
			<button class="button1">去看看</button>
			<p class="p7">￥1400.00</p>
		</div>
		<div class="div32">
			
		</div>
		<div class="div33">
			
		</div>
	</div>
</body>
</html>